<!-- 商品热销前十 -->
<template>
  <div>

    <h3>商品热榜<span class="title"> {{ params.start.replace('-','.') }} ~ {{ params.end.replace('-','.') }}</span></h3>
    <el-table
      :data="skuList"
      style="width: 100%"
      :default-sort="{prop: 'count',order: 'descending'}"
      :show-header="false"
    >
      <el-table-column
        type="index"
        width="100"
      />
      <el-table-column
        prop="skuName"
        width="200"
      />
      <el-table-column
        prop="count"
        :formatter="formatter"
      />
    </el-table>
  </div>
</template>

<script>
import { getSkuTop } from '@/api'
export default {
  data() {
    return {
      params: {
        start: '2022-10-01',
        end: new Date().toLocaleDateString().replace(/\//g, '-')
      },
      skuList: []
    }
  },
  async created() {
    const res = await getSkuTop(10, this.params.start, this.params.end)
    // console.log(res)
    this.skuList = res.data
  },
  methods: {
    formatter(row, column) {
      return row.count + '单'
    }
  }

}

</script>
<style lang='scss' scoped>
h3 {
  font-size: 16px;
  font-weight: normal;
  .title{
    height: 21px;
    display: inline-block;
    line-height: 21px;
    margin-left: 10px;
    color: #999;
    font-size: 12px;
  }
}
</style>
